<template>
  <div>
    <div class="video">
      <el-row :gutter="10">
        <el-col v-if="isShow" :span="16">
          <div class="VideoList" ref="left">
            <el-col class="enlargeBox" :span="16" v-for="(item,index) in data" :key="index">
              <div>
                <i class="el-icon-full-screen enlarge" @click="clickOn(item)"></i>
                <iframe
                  :width="iframeWidth"
                  :height="iframeHeight"
                  :style="{ transform: `scale(${SX},${SY})` }"
                  style="'border: '0px'; transform-origin: 0px 0px;' "
                  :src="item.value"
                  frameborder="0"
                  scrolling="no"
                  allowtransparency="yes"
                ></iframe>
              </div>
            </el-col>
          </div>
          <div class="VideoList">
            <el-col class="enlargeBox" :span="16" v-for="(item,index) in data2" :key="index">
              <div>
                <i class="el-icon-full-screen enlarge enlarge" @click="clickOn(item)"></i>
                <iframe
                  :width="iframeWidth"
                  :height="iframeHeight"
                  :style="{ transform: `scale(${SX},${SY})` }"
                  style="'border: '0px'; transform-origin: 0px 0px;' "
                  :src="item.value"
                  frameborder="0"
                  scrolling="no"
                  allowtransparency="yes"
                ></iframe>
              </div>
            </el-col>
          </div>
        </el-col>

        <el-col v-else :span="16">
          <div class="box" ref="boxHeight">
            <i class="el-icon-full-screen enlarge" @click="clickOn(item)"></i>
            <iframe
              :width="iframeWidth"
              :height="iframeHeight"
              :style="{ transform: `scale(${BWC},${BHC})` }"
              style="'border: '0px'; transform-origin: 0px 0px;' "
              src="https://www.bksadan.com:8092/view-stream.html?chanid=BKY_201"
              frameborder="0"
              scrolling="no"
              allowtransparency="yes"
            ></iframe>
          </div>
        </el-col>

        <el-col :span="8">
          <div style="padding-right:15px;  margin-left:-5.5%; ">
            <maps />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import maps from "./children/map";
export default {
  components: {
    maps
  },
  data() {
    return {
      iframeWidth: 1980,
      iframeHeight: 1080,
      isShow: true,
      scaleW: 0,
      scaleH: 0,
      SX: 0,
      SY: 0,
      BW: 0,
      BH: 0,
      BWC: 0,
      BHC: 0,
      index: 1,
      data: [
        {
          value: "https://www.bksadan.com:8092/view-stream.html?chanid=BKY_201"
        },
        {
          value: "https://www.bksadan.com:8092/view-stream.html?chanid=BKY_201"
        }
      ],
      data2: [
        {
          value: "https://www.bksadan.com:8092/view-stream.html?chanid=BKY_201"
        },
        {
          value: "https://www.bksadan.com:8092/view-stream.html?chanid=BKY_201"
        }
      ],
      timer: null
    };
  },
  mounted() {
    // this.resize();
    window.onresize = () => {
        console.log(1)
      this.debounce_();
    };
  },
  watch: {
    scaleW() {
      this.SX = this.scaleW / 2 / this.iframeWidth;
      this.SY = this.scaleH / this.iframeHeight;
      console.log(this.scaleW, this.SX);
    },
    BW() {
      this.BWC = this.BW / this.iframeWidth;
      this.BHC = this.BH / this.iframeHeight;
    },
    isShow() {
      this.$nextTick(() => {
        this.resize();
        this.BWC = this.BW / this.iframeWidth;
        this.BHC = this.BH / this.iframeHeight;
      });
    }
  },
  methods: {
    debounce_(e) {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.resize();
      }, 500);
    },
    clickOn() {
      this.isShow = !this.isShow;
    },
    resize() {
      if (this.$refs.left) {
        this.scaleW = this.$refs.left.offsetWidth;
        this.scaleH = this.$refs.left.offsetHeight;
      }
      if (this.$refs.boxHeight) {
        this.BH = this.$refs.boxHeight.offsetHeight;
        //  加上他的边距
        this.BW = this.$refs.boxHeight.offsetWidth;
      }
    }
  }
};
</script>
<style  scoped>
.video {
  padding-top: 30px;
}
.VideoList {
  display: flex;
  /* flex: 1; */
  overflow: hidden;
}
.VideoList div {
  width: 49%;
  height: 440px;
}
.VideoList /deep/ .el-col {
  padding: 0 !important;
}
.enlargeBox {
  position: relative;
}
.enlarge {
  font-size: 30px;
  position: absolute;
  color: aliceblue;
  z-index: 99;
  right: 30px;
  top: 10px;
  cursor: pointer;
}
.box {
  height: 885px;
  position: relative;
}
</style>